<template>
	<view class="All">
		<div class="topBox">
		<div class="topNum">{{integral}}<view>积分</view></div>
		<div class="letfPath" @click="tz()">积分详情</div>
		</div>
		<div class="btmBox">
			<div class="btmTop">
				<view>今日任务</view>
				<!-- <view class="uni-padding-wrap uni-common-mt">
					<view class="progress-box">
									<progress :percent="pgList[0]" show-info stroke-width="3" />
								</view>
				</view> -->
			</div>
				<div class="centBox" v-for="(itme,index) in list" :key="itme.index">
					<template slot-scope='scope'>
					<div class="cBOxl">
						<image :src="itme.at_imgSrc"></image>
					</div>
					<div class="cBoxc">{{itme.at_name}}
					<p class='cBoxcp'>{{itme.at_desc}}{{itme.at_jifen}}</p></div>
					
					<div class="cBoxr">
						<button class="bgs" :class="isActive===index ? 'bg':''" @click="HuoQ(itme.at_jifen,index)" >{{text}}</button>
						<!-- <button type="default" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">获取手机号</button> -->
					</div>
					</template>
					
				</div>
			
		</div>
	</view>
</template>

<script>
	export default {
		
		data() {
			return {
				
				integral:0,
				text:'领取',
				isActive:'',
				list:[
				],
				// pgList: [20,20,20,20]
			}
			
		},
		methods: {
			
			tz(){
					uni.navigateTo({
						url: '/pages/UserInt/UserInt'})
						
			},
			
			HuoQ(value,index){
				console.log(index);
				let txt=this
				uni.getStorage({
					key: 'userInfo',
					success: (res)=> {
						//发起请求
						console.log(value)
						uni.request({
						    url: 'http://localhost:3001/Addjf', //仅为示例，并非真实接口地址。
							method:'POST',
							data:{
								userName:res.data,
								jiFen:value
							},
						    success: (res) => {
								console.log(res);
								
								this.isActive=index
								console.log(this.isActive);
						    }
						});
					},
					
				});
				
			}
		},
		created() {
			let ls=this
			uni.getStorage({
				key: 'userInfo',
				success: (res)=>{
					uni.request({
					    url: 'http://localhost:3001/selectJf', //仅为示例，并非真实接口地址。
						method:'POST',
						data:{
							userName:res.data,
							
						},
					    success: (res) => {
						  ls.integral=res.data.data[0].jiFen
						  
					    }
					});
				}
			});
			uni.request({
			    url: 'http://localhost:3001/getMarkGI', //仅为示例，并非真实接口地址。
			    success: (res) => {
					console.log(res.data.data);
					this.list=res.data.data
			    }
			});
		}
		
	}
</script>

<style lang="less">
	.progress-box {
			display: flex;
			height: 50rpx;
			
			
		}
		.uni-icon {
				line-height: 1.5;
			}
		

	// page {
	//   background-color:#fdf8ff ;
	// }
	
	.topBox{
		display: flex;
		height: 130rpx;
		justify-content: space-between;
		background-color: #F78664;
		border-radius: 0 0 25rpx 25rpx;
	}
	.topNum {
	color: white;
	font-size: 54rpx;
	font-weight: bolder; 
	padding-left: 20rpx;
					view{
						font-size: 30rpx;
						color: white;
						display: inline-block;
					}
					
	}
	.letfPath{
		width: 150rpx;
		height: 60rpx;
		background-color: white;
		border-radius:8rpx 8rpx;
		margin-right: -4rpx;
		font-size: 25rpx;
		line-height: 60rpx;
		text-align: center;
	}
	.btmBox{
		width: 720rpx;
		margin: 0 auto;
		margin-top: -35rpx;
		background-color: white;
		border-radius:25rpx 25rpx 0 0 ;
			}
	.btmTop{
		height: 70rpx;
		color: #877e84;
		font-size: 25rpx;
		
		line-height: 70rpx;
		margin-left: 25rpx;
		
	}
	.centBox{
		height: 160rpx;
		border-bottom: 1rpx solid #ecebeb;
		display: flex;
		justify-content: space-between;
		padding-top: 20rpx;
		
		.cBOxl{
			width: 150rpx;
			margin-left: 25rpx;
			image{
				width: 150rpx;
				height: 150rpx;
				
			}
			
		}
		.cBoxc{
			width: 290rpx;
			font-size: 28rpx;
			color: #7a7a7a;
			.cBoxcp{
				font-size: 20rpx;
				color: #7a7a7a;
				padding-top: 60rpx;
			}
		}
		.cBoxr{
			margin-right: 25rpx;
			width: 140rpx;
		}
	}
	.v{
		border: 1rpx solid red;
	}
	.bgs{
		margin-top:40rpx ;
		color: white;
		background-color: #F59A23;
		height: 80rpx;
		font-size: 25rpx;
		text-align: center;
		line-height: 80rpx;
	}
	/deep/.bg{
			background-color: #7a7a7a;
		}
	
</style>
